<template>
  <div>
    <Row :gutter="24">
      <Col :xl="7" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
        <Row :gutter="24">
          <Col :xl="24" :lg="12" :md="12" :sm="12" :xs="24" class="ivu-mb">
            <Card :bordered="false" dis-hover v-height="380">
              <div slot="title">
                <Avatar
                  icon="md-bulb"
                  size="small"
                  v-color="'#fa8c16'"
                  v-bg-color="'#fff7e6'"
                />
                <span class="ivu-pl-8">待办事项</span>
              </div>
              <Grid :col="3" center square :border="false">
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">发布经营信息</div>
                </GridItem>
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">经营信息跟踪</div>
                </GridItem>
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">经营信息预警</div>
                </GridItem>
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">人员管理</div></GridItem
                >
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">我的企业</div></GridItem
                >
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">线下项目备案</div></GridItem
                >
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">发布信息查询</div></GridItem
                >
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">经营信息接收</div></GridItem
                >
                <GridItem>
                  <Badge :count="3">
                    <a href="#" class="demo-badge"></a>
                  </Badge>
                  <div class="font12">经营信息一张图</div></GridItem
                >
              </Grid>
            </Card>
          </Col>
        </Row>
      </Col>
      <Col :xl="17" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
        <Card :bordered="false" dis-hover v-height="380">
          <div slot="title" class="titleBox">
            <div>
              <Avatar
                icon="ios-pulse"
                size="small"
                v-color="'#1890ff'"
                v-bg-color="'#e6f7ff'"
              />
              <span class="ivu-pl-8">经营信息发布统计</span>
            </div>
            <div class="ivu-pl-8">
              <ButtonGroup>
                <Button>年</Button>
                <Button>月</Button>
                <Button>日</Button>
              </ButtonGroup>
            </div>
          </div>
          <Row :gutter="24">
            <Col :xl="6" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
              <Grid :col="1" center square :border="false">
                <GridItem>
                  <div class="gridBox">
                    <div class="gridLeftBox"></div>
                    <div class="gridRightBox">
                      <div>经营信息发布数</div>
                      <div>368条</div>
                    </div>
                  </div>
                </GridItem>

                <GridItem>
                  <div class="gridBox">
                    <div class="gridLeftBox"></div>
                    <div class="gridRightBox">
                      <div>经营信息发布数</div>
                      <div>368条</div>
                    </div>
                  </div></GridItem
                >
                <GridItem>
                  <div class="gridBox">
                    <div class="gridLeftBox"></div>
                    <div class="gridRightBox">
                      <div>经营信息发布数</div>
                      <div>368条</div>
                    </div>
                  </div></GridItem
                >
              </Grid>
            </Col>
            <Col
              :xl="18"
              :lg="24"
              :md="24"
              :sm="24"
              :xs="24"
              class="ivu-mb customClass"
            >
              <informationRelease ref="informationRelease"></informationRelease>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>

    <Row :gutter="24">
      <Col :xl="7" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
        <Row :gutter="24">
          <Col :xl="24" :lg="12" :md="12" :sm="12" :xs="24" class="ivu-mb">
            <Card :bordered="false" dis-hover v-height="380">
              <div slot="title">
                <Avatar
                  icon="md-bulb"
                  size="small"
                  v-color="'#fa8c16'"
                  v-bg-color="'#fff7e6'"
                />
                <span class="ivu-pl-8">经营信息跟踪统计</span>
              </div>
              <informationTracking
                ref="informationTracking"
              ></informationTracking>
            </Card>
          </Col>
        </Row>
      </Col>
      <Col :xl="17" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
        <Card :bordered="false" dis-hover v-height="380">
          <div slot="title" class="titleBox">
            <div>
              <Avatar
                icon="ios-pulse"
                size="small"
                v-color="'#1890ff'"
                v-bg-color="'#e6f7ff'"
              />
              <span class="ivu-pl-8">项目收益统计</span>
            </div>
            <div class="ivu-pl-8">
              <ButtonGroup>
                <Button>年</Button>
                <Button>月</Button>
                <Button>日</Button>
              </ButtonGroup>
            </div>
          </div>
          <divisionStatistics ref="divisionStatistics"></divisionStatistics>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import informationRelease from "../components/informationRelease.vue";
import informationTracking from "../components/informationTracking.vue";
import divisionStatistics from "../components/divisionStatistics.vue";
export default {
  name: "首页",
  components: { informationRelease, informationTracking, divisionStatistics },
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="css" scoped>
::v-deep .ivu-grid-item {
  height: 95.328px !important;
}
.demo-badge {
  width: 42px;
  height: 42px;
  background: #eee;
  border-radius: 6px;
  display: inline-block;
}
.font12 {
  font-size: 12px;
}
.gridBox {
  display: flex;
  align-items: center;
  .gridLeftBox {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #999;
    margin-right: 10px;
  }
  .gridRightBox {
    text-align: left;
  }
}
.customClass {
  padding-left: 0 !important;
}
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
